<template>
	<view class="page consultation_list_page">
		<patient @info="getPatientId"></patient>
		<view class="consultation_list" v-if="list.length>0">
			<view class="card consultation_item" v-for="item in list" :key="item.id"
				@click="gotoPage(`/pagesCommon/case/caseDetails?id=${item.id}`)">
				<view class="item_title">
					<view class="title_text">
						<image class="icon" src="@/static/icon/consultation/consultation_icon.png" mode="scaleToFill"></image>
						<view class="text">
							编号：2024061392038
						</view>
					</view>
				</view>
				<view class="item_content">
					<view class="text">
						患者于4.5号初次感觉心脏轻微痛，线下医院就诊后做了检查，检查结果都没有什么问题，但是......
					</view>
				</view>
				<view class="item_more">
					<view class="date">
						生成时间: 2024-06-13 12:00:00
					</view>
					<view class="text">
						查看详情
						<uni-icons type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="no_thing" v-else>
			<image class="placeholder" src="@/static/images/noting.png" mode="scaleToFill"></image>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getMymedicalrecord
	} from '@/api/index.js'
	export default {
		name: 'caseList',
		data() {
			return {
				list: [],
				total: 0,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					patientId: 0
				},
			}
		},
		methods: {
			getPatientId(value) {
				this.queryForm.patientId = value.id
				this.getMymedicalrecord()
			},
			getMymedicalrecord() {
				getMymedicalrecord(this.queryForm).then(res => {
					this.list = res.data
					this.total = res.total
				}).catch(err => {})
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.consultation_list_page {
		.title {
			.more {
				.btns {
					display: flex;
					align-items: center;
					padding: 20rpx 30rpx;
					border-radius: 10rpx;

					.btn_text {
						margin-left: 10rpx;
					}
				}
			}
		}

		.consultation_list {
			.consultation_item {
				margin: 30rpx 0;

				.item_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}

					.title_text {
						display: flex;
						align-items: center;

						.text {
							font-size: 30rpx;
							color: #333333;
						}
					}
				}

				.item_content {
					margin: 20rpx 0;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #F8FAFB;
					font-size: 28rpx;
					color: #666666;
				}

				.item_more {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>